<script lang="ts" setup>
const documentKey = ref(false);
</script>

<template>
	<div class="popup-frame">
		<transition name="showbox">
			<div v-if="documentKey" class="box w-screen h-screen bg-violet-900"></div>
		</transition>
		<transition name="center-box">
			<div v-if="documentKey" class="box-center box w-72 h-72 bg-violet-900"></div>
		</transition>
		<el-button class="relative z-50" @click="documentKey = !documentKey">6</el-button>
	</div>
</template>

<style lang="scss" scoped>
.box {
	position: fixed;
	inset: 0;
	margin: auto;
}

.box-center {
	background-color: #fff;
}

@keyframes boxshow-ani {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes f-boxshow-ani {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.showbox-enter-active {
	animation: boxshow-ani 2s ease;
}

.showbox-leave-active {
	animation: f-boxshow-ani 2s ease reverse;
}

@keyframes fold-box {
	0% {
		width: 0;
		height: 0;
	}

	100% {
		width: 18rem;
		height: 18rem;
	}
}

.center-box {
	&-enter-active {
		animation: fold-box 2s ease;
	}

	&-leave-active {
		animation: fold-box 2s ease reverse;
	}
}
</style>
